<template>
  <ul class="custom-tree">
    <li v-for="(item, index) in data" :key="index">
      <div class="tree-item" :class="{'red-border': item.big}" @click="handleToggle(item)">
        <i v-if="item.children" :class="item.expand ? expandIcon.close : expandIcon.open"></i>
        <div>
          <div class="t">
            <span>{{item.username}}{{item.phone}}</span>
            <span>{{item.static_level | staticLevelFilter}}</span>
            <span>排单总金额 {{item.total_coin || 0}}</span>
          </div>
          <div class="b">
            <span>已预约 {{item.yuyue_coin || 0}}</span>
            <span>今日新增业绩 {{item.today_coin || 0}}</span>
            <span>总业绩 {{item.team_yeji}}</span>
          </div>

        </div>
      </div>
      <transition name="fade">
        <tree v-if="item.expand" :data="item.children" :expand-icon="expandIcon"></tree>
      </transition>

    </li>
  </ul>
</template>

<script>
  export default {
    name: "tree",
    props: {
      data: Array,
      expandIcon: {
        type: Object,
        validator: function (value) {
          return value.open && value.close;
        }
      },
      abc: String
    },
    filters: {
      staticLevelFilter(status) {
        return status === '1' ? '银牌': status==='2'?'金牌':'钻石'
      }
    },
    methods: {
      handleToggle(node) {
        if(node.children && node.children.length === 0) this.$emit('onToggle', node);
        else node.expand = !node.expand;
      }
    }
  }
</script>

<style scoped lang="scss">
  .custom-tree {
    > li {
      margin-left: 30px;
    }

    .tree-item {
      border: 1px solid $mainColor;
      border-radius: $radius;
      padding: $padding;
      margin-bottom: $padding;
      display: flex;
      align-items: center;
      min-height: 40px;
      &.red-border {
        border-color: #F82D2E;
        color: #F82D2E;
      }
      i {
        font-size: 40px;
      }
      > div {
        margin-left: $padding;
        flex: 1;
        > div {
          span {
            margin: 0 5px;
            font-size: 20px
          }
        }
      }

    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>